<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
    <style>
        ul {
            display: flex;
            list-style: none;
        }

        li {
            margin: 10px 20px;
        }

        .on {
            background-color: green;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 定义导航部分 -->
        <ul>
            <li @click="comName='part1'" :class="comName=='part1'?'on':''">综艺</li>
            <li @click="comName='part2'" :class="comName=='part2'?'on':''">体育</li>
            <li @click="comName='part3'" :class="comName=='part3'?'on':''">新闻</li>
        </ul>
        <keep-alive>
            <component :is="comName"></component>
        </keep-alive>
    </div>
</body>

</html>
<script>
    //  动态组件:
    // 定义: vue 提供了一个内置的组件, 叫 component,使用时,以自定义标签的形式使用
    // 该组件有一个固定属性 :is='组件的变量名', 变量名就是其他的组件名. is的属性值为哪一个组件名,
    // 最终显示的就是对应的组件


    //keepAlive 组件 ,也是vue 官方内置的组件,作用用来缓存包裹的组件,避免重复的重建和卸载组件
    //被keep-alive 缓存的组件,该组件的生命周期中的 created  只有第一次的时候触发,后续不再触发
    // 可以使用 activated 和 deactivated 替换以前创建和销毁生命周期,提高浏览器的性能


    // 使用场景: 
    // 第一种: 选项卡 
    // 第二种: 使用keep-alive缓存列表页组件.从详情页返回列表ye,避免重复的创建和卸载组件
    const { createApp } = Vue;
    const app = createApp({
        data() {
            return {
                comName: 'part1'
            }
        },
        methods: {

        },
        components: {
            part1: {
                template: `<div>组件1-综艺</div>`,
                // created() {
                //     console.log('created-组件1');
                // },
                // unmounted() {
                //     console.log('unmounted-组件1');
                // },
                activated() {
                    console.log('activated-组件1');
                },
                deactivated() {
                    console.log('deactivated-组件1');
                }
            },
            part2: {
                template: `<div>组件2-体育</div>`,
                // created() {
                //     console.log('created-组件2');
                // },
                // unmounted() {
                //     console.log('unmounted-组件2');
                // },
                activated() {
                    console.log('activated-组件2');
                },
                deactivated() {
                    console.log('deactivated-组件2');
                }
            },
            part3: {
                template: `<div>组件3-新闻</div>`,
                // created() {
                //     console.log('created-组件3');
                // },
                // unmounted() {
                //     console.log('unmounted-组件3');
                // },
                activated() {
                    console.log('activated-组件3');
                },
                deactivated() {
                    console.log('deactivated-组件3');
                }
            }
        }
    }).mount('#app')

</script>